<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物流结算</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<h3>
    <a href=""> refresh</a>
</h3>
    <div id="settle">
        <el-form :inline="true" :model="ship" class="demo-form-inline">
            <el-form-item label="货运单号">
                <el-input v-model="ship.shippingNumber" autocomplete="off" @change="numChange(ship.shippingNumber)" placeholder="输入货运单号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"  icon="el-icon-search" @click="find" circle></el-button>
            </el-form-item>
        </el-form>
        <!-- 表单模态框区域 -->
        <el-dialog title="结算信息" :visible.sync="dialogFormVisible">
            <el-form :model="shipping">
                <el-form-item label="货运单号">
                    <el-input v-model="shipping.shippingNumber" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="货物种类">
                    <el-input v-model="shipping.order.product.pname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="订单编号">
                    <el-input v-model="shipping.order.orderId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量">
                    <el-input v-model="shipping.order.number" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出发地">
                    <el-input v-model="shipping.startPlace" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="目的地">
                    <el-input v-model="shipping.endPlace" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="结算金额">
                    <el-input v-model="shipping.order.money" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addSettles">确 定</el-button>
            </div>
        </el-dialog>
        <!--数据显示页面-->
        <el-table
                :data="shippings"
                style="width: 100%">
            <el-table-column
                    label="编号"
                    width="100">
                <template slot-scope="scope">
                    <i class="el-icon-loading"></i>
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="运货单号"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-user"></i>
                    <span style="margin-left: 10px">{{ scope.row.shippingNumber }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="货物类别"
                    width="100">
                <template slot-scope="scope">
                    <i class="el-icon-loading"></i>
                    <span style="margin-left: 10px">{{ scope.row.order.product.pname }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="出发地"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-sunrise"></i>
                    <span style="margin-left: 10px">{{ scope.row.startPlace }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="目的地"
                    width="200">
                <template slot-scope="scope">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px">{{ scope.row.endPlace }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="结算状态"
                    width="100">
                <template slot-scope="scope">
                    <i class="el-icon-loading"></i>
                    <span style="margin-left: 10px" class="status">{{ scope.row.order.orderStatus == -3 ? "未结算" : "已结算" }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)" plain :disabled="scope.row.flag">结算</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <div class="block" style="margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="page_size"
                           :page-size="4"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="count"
                           :background="back">
            </el-pagination>
        </div>
    </div>
<script>
    new Vue({
        el:"#settle",
        data(){
            return{
                dialogFormVisible:false,
                // 当前页数
                currentPage: 1,
                // 发货订单总数
                count : 0,
                // 每页的数据
                page_size : [5,10],
                // 当前每页的数据
                pageSize : 5,
                // 分页背景
                back: true,
                shippings:[],
                ship:{},
                shipping:{
                    order:{
                        product:{

                        },
                    },
                },
                shippingNumber:"",
                settlement:{freightId:"",settlementStatus:""},
            }
        },
        methods:{
            numChange(val){
                if (val == null){
                    return;
                }else {
                    this.shippingNumber = val;
                }
            },
            loadShipping(){
                axios.get("/shippings/"+this.currentPage+"/"+this.pageSize+"?shippingNumber=" + this.shippingNumber )
                .then(res =>{
                    this.shippings=res.data.data;
                    for (let i = 0; i < this.shippings.length; i++) {
                        if(this.shippings[i].order.orderStatus == -3){
                            this.shippings[i].flag = false;
                        }else{
                            this.shippings[i].flag = true;
                        }
                    }
                    this.count=res.data.count;
                })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadShipping();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadShipping();
            },
            handleEdit(index, row) {
                this.shipping=JSON.parse(JSON.stringify(row));
                this.dialogFormVisible=true;
            },
            find(){
                this.loadShipping();
            },
            addSettles(){
                console.log(this.shipping.shippingNumber);
                this.settlement.freightId=this.shipping.shippingNumber;
                this.settlement.settlementStatus=this.shipping.order.orderStatus-1;
                axios.post("/settle",this.settlement)
                    .then(res => {
                        if(res.data == "ok"){
                            this.$message({
                                type: "success",
                                message: "结算成功",
                            });
                            this.loadShipping();
                        }
                    });
                this.dialogFormVisible = false;
            },
        },
        mounted(){
            this.loadShipping();
        }
    })
</script>
</body>
</html>